<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生成名片</title>

  <!-- 样式文件 -->
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div class="box">
    <!-- 左边 -->
    <div class="container">
      <div id="canvas" class="container-border">
        <img id="img" style="width: 200px;height: 200px;" src="img/t.png" />
        <div class="detail">
          <span class="nickname">张三</span>
          <span class="job">WEB前端工程师</span>
        </div>
        <div class="introduce">3年ToB类产品开发经验，经常跨部门沟通，能够站在产品角度考虑问题。较强的执行力，能推动和协同其他人实现需求落地，并取得预期效果。较强的产品思维，多次协助pm打造出优秀的项目。</div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="rightConent">
      <div>
        <input class="file-input" type="file" name="avatar" />
        <div class="file-font">上传头像</div>
      </div>

      <div class="inputBox">
        <input name="nickname" type="text" value="张三" placeholder="请输入昵称" required />
        <input name="job" type="text" value="WEB前端工程师" placeholder="请输入职位" required />
        <input name="introduce" type="text" value="3年ToB类产品开发经验，经常跨部门沟通，能够站在产品角度考虑问题。" />
        <input name="picname" type="text" value="" placeholder="生成名片图片名称" />
      </div>

      <div id="save">保存图片</div>
    </div>
  </div>

  <!-- 引入第三方库 -->
  <script src="./js/jquery.min.js"></script>

  <!-- 截图插件 -->
  <script src="./js/html2canvas.min.js"></script>

  <!-- 业务逻辑的代码 -->
  <script>
    // 给多个元素绑定输入事件
    $("input[name=nickname], input[name=job], input[name=introduce]").on('input', function () {
      // 当前操作元素name属性和输入的value值
      // console.log($(this).prop('name'))
      // console.log($.trim($(this).val()))

      var name = $(this).prop('name')
      var value = $.trim($(this).val())

      // 将输入的内容给到制定的div元素 class元素
      $($('.' + name)).text(value)
    })

    // 更换图片 当文件有选择的时候就会触发事件
    $("input[name=avatar]").change(function () {
      // 获取到所选择的第一张图片
      var file = this.files[0]

      // 创建文件读取对象
      var reader = new FileReader()

      // 让读取器读取文件
      reader.readAsDataURL(file)

      // 当文件读取成功后，去获取本地的访问路径
      reader.onload = function () {
        // 当已经读取到文件路径的时候，就设置img标签的src显示路径
        if (this.result) {
          $("#img").attr("src", this.result) //将图片赋值到img标签上面
        }
      }
    })

    // 保存名片事件
    $("#save").click(function () {
      var nickname = $.trim($("input[name=nickname]").val())
      var job = $.trim($("input[name=job]").val())
      var introduce = $.trim($("input[name=introduce]").val())

      if (!nickname) {
        alert("请输入姓名")
        $("input[name=nickname]").focus() // 焦点闪烁
        return false
      }

      if (!job) {
        alert("请输入职业")
        $("input[name=job]").focus()
        return false
      }

      if (!introduce) {
        alert("请输入个人简介")
        $("input[name=introduce]").focus()
        return false
      }

      //更换内容
      $('.nickname').text(nickname)
      $('.job').text(job)
      $('.introduce').text(introduce)

      //图片名称
      let picname = $.trim($("input[name=picname]").val())
      picname = picname ? picname + '.jpg' : 'card.jpg'

      // 获取名片盒子的属性信息
      var container = document.getElementById("canvas")
      var width = container.offsetWidth //元素的宽度
      var height = container.offsetHeight //元素的高度

      // 构建一个新的图片容器
      var canvas = document.createElement('canvas')
      var context = canvas.getContext('2d')

      //获取缩放比率
      var scale = GetPixelRatio(context);

      // 设置画布的宽和高
      canvas.width = width * scale
      canvas.height = height * scale
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      context.scale(scale, scale)

      // console.log(width, height)
      // console.log(canvas.width, canvas.height)

      //设置准备截图的参数
      let opts = {
        scale: scale,
        canvas: canvas,
        width: width,
        height: height,
        dpi: window.devicePixelRatio
      };

      //调用插件页面截图
      html2canvas(container, opts).then(function (canvas) {
        context.imageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        // 将图片生成1比1地址信息(base64格式)
        let dataUrl = canvas.toDataURL('image/jpeg', 1.0)

        //将名片下载到本地的图片
        DataURLToBlob(picname, dataUrl)
      })
    })

    // 获取设备的PixelRatio 设备的缩放比率
    let GetPixelRatio = function (context) {
      if (context) {
        let backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          0.5;
        return (window.devicePixelRatio || 0.5) / backingStore;
      }
    };

    // 数据转换下载图片
    let DataURLToBlob = function (picname, dataURI) {
      //base64 转换为 blob格式
      let bstr = atob(dataURI.split(',')[1]),
        len = bstr.length,
        arr = new Uint8Array(len);

      for (let i = 0; i < len; i++) {
        arr[i] = bstr.charCodeAt(i);
      }

      //转换blob数据
      var blob = new Blob([arr])

      ////创建a元素，进行下载
      var download = $("<a>")
        .attr("href", URL.createObjectURL(blob))
        .attr("download", picname)
        .appendTo("body")
        .on("click", function () {
          if (navigator.msSaveBlob) {
            return navigator.msSaveBlob(blob, picname);
          }
        });

      download[0].click();
      download.remove();
    }
  </script>
</body>

</html>